<template>
  <div class="riskPoint">
    <div class="tabr-nav-title">
      <van-nav-bar
        :title="title"
        style="width: 100%; height: 44px"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="content">
      <div class="search"></div>
      <div class="cardList">
        <van-pull-refresh v-model="refreshing" @refresh="onLoad('refresh')">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="alarm-item" v-for="(item, index) in state.alarmList" :key="index">
              <div class="alarm-header">
                <van-image width="24" height="24" fit="cover" round :src="locationIcon" />
                <span class="t1">{{ item.address }}</span>
                <span
                  class="t3"
                  :style="{
                    color: getColor(item.warningLevel),
                    borderColor: getColor(item.warningLevel),
                  }"
                  >{{ MAP_STATE.warningLevel[item.warningLevel] }}</span
                >
              </div>
              <div class="alarm-content">
                <div class="c1">
                  {{ item.title }}
                </div>
                <div class="c2">
                  {{ item.warningContent }}
                </div>
                <div class="line"></div>

                <div class="status">
                  <div>
                    测站名称
                    <span>{{ item.stationName }}</span>
                  </div>
                  <div>
                    预警类型
                    <span>{{ item.alarmType }}</span>
                  </div>
                  <div>
                    预警时间
                    <span style="color: rgba(0, 127, 255, 1)">{{ item.alarmTime }}</span>
                  </div>
                  <div>
                    {{ formattedDate(item.warningPeriodStart) }} -
                    {{ formattedDate(item.warningPeriodEnd) }}
                  </div>
                </div>

                <div class="confirm">
                  <van-button type="primary" block @click="createOrder(item)"
                    >创建工单</van-button
                  >
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import moment from "moment";
import locationIcon from "@/assets/images/task/icon_region_location.png";
const router = useRouter();
const route = useRoute();
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 20,
});
const pages = ref(0);
const title = route.query.title || "中小河流涨水预警";
const state = reactive({
  alarmList: [
    {
      title: "新桥街道石梯沟支路新桥铝制品厂（新桥铝制品厂）",
      address: "中心城区·沙坪坝区",
      warningLevel: 1,
      camera: 1,
      levelGauge: 0,
      genericPlan: 1,
      director: 1,
      target: "下穿道",
      time: "2025/05/11 10:32:45",
      warningContent: "受降雨影响，预计潼南区琼江泰安站未来12小时将出现明显涨水...",
      stationName: "支坪津坪",
      alarmType: "水情预警事件",
      alarmTime: "12小时",
    },
    {
      title: "新桥街道石梯沟支路新桥铝制品厂（新桥铝制品厂）",
      address: "中心城区·沙坪坝区",
      warningLevel: 2,
      camera: 1,
      levelGauge: 0,
      genericPlan: 1,
      director: 1,
      target: "下穿道",
      time: "2025/05/11 10:32:45",
      warningContent: "受降雨影响，预计潼南区琼江泰安站未来12小时将出现明显涨水...",
      stationName: "支坪津坪",
      alarmType: "水情预警事件",
      alarmTime: "12小时",
    },
    {
      title: "新桥街道石梯沟支路新桥铝制品厂（新桥铝制品厂）",
      address: "中心城区·沙坪坝区",
      warningLevel: 3,
      camera: 1,
      levelGauge: 0,
      genericPlan: 1,
      director: 1,
      target: "下穿道",
      time: "2025/05/11 10:32:45",
      warningContent: "受降雨影响，预计潼南区琼江泰安站未来12小时将出现明显涨水...",
      stationName: "支坪津坪",
      alarmType: "水情预警事件",
      alarmTime: "12小时",
    },
    {
      title: "新桥街道石梯沟支路新桥铝制品厂（新桥铝制品厂）",
      address: "中心城区·沙坪坝区",
      warningLevel: 1,
      camera: 1,
      levelGauge: 0,
      genericPlan: 1,
      director: 1,
      target: "下穿道",
      time: "2025/05/11 10:32:45",
      warningContent: "受降雨影响，预计潼南区琼江泰安站未来12小时将出现明显涨水...",
      stationName: "支坪津坪",
      alarmType: "水情预警事件",
      alarmTime: "12小时",
    },
    {
      title: "新桥街道石梯沟支路新桥铝制品厂（新桥铝制品厂）",
      address: "中心城区·沙坪坝区",
      warningLevel: 2,
      camera: 1,
      levelGauge: 0,
      genericPlan: 1,
      director: 1,
      target: "下穿道",
      time: "2025/05/11 10:32:45",
      warningContent: "受降雨影响，预计潼南区琼江泰安站未来12小时将出现明显涨水...",
      stationName: "支坪津坪",
      alarmType: "水情预警事件",
      alarmTime: "12小时",
    },
  ],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  pages: 0,
});

// 根据状态返回颜色
const getColor = (key) => {
  switch (key) {
    case 1:
      return "#00b042";
    case 2:
      return "#FC9C00";
    case 3:
      return "#FF4D4F";
    default:
      break;
  }
};
const onClickLeft = () => history.back();
const onLoad = (type) => {
  if (type === "refresh") {
    finished.value = false;
    loading.value = true;
  }

  if (refreshing.value || type === "refresh") {
    state.pages = 0;
    state.queryParams.pageNum = 1;
    state.alarmList = [];
    refreshing.value = false;
  }

  if (type !== "refresh") {
    if (state.queryParams.pageNum >= state.pages) return;
    state.queryParams.pageNum++;
  }
};
const getList = () => {
  // loading.value = true;
  // getDisposeList(queryParams, searchData)
  //   .then((res) => {
  //     if (res.data && res.data.code == 200) {
  //       pages.value = Math.ceil(res.data.total / queryParams.pageSize);

  //       let data = res.data.rows || [];
  //       if (queryParams.pageSize == 1) {
  //         listCard.value = data;
  //       } else {
  //         listCard.value = listCard.value.concat(data);
  //       }

  //       if (queryParams.pageNum == pages.value || pages.value == 0) {
  //         finished.value = true;
  //       }
  //     } else {
  //       finished.value = true;
  //     }
  //   })
  //   .catch((err) => {
  //     finished.value = true;
  //   })
  //   .finally(() => {
  // loading.value = false;
  //   });
  loading.value = true;

  finished.value = true;
  loading.value = false;
};

// 状态映射
const MAP_STATE = {
  // 风险等级
  warningLevel: {
    1: "低风险",
    2: "中风险",
    3: "高风险",
  },
  // 预警状态
  warningStatus: {
    1: "生效中",
    2: "已结束",
  },
  // 响应状态
  ifResponse: {
    0: "未响应",
    1: "已响应",
    2: "已结束",
  },
  // 叫应状态
  callingState: {
    1: "未叫应",
    2: "已叫应",
    3: "已结束",
  },
  // 是否演练
  isDrill: {
    0: "否",
    1: "是",
  },
};

const formattedDate = (date) => {
  return moment(date).format("MM/DD HH:mm");
};
const cardClick = (props) => {
  router.push({
    path: "/waterManagement/detail",
    query: {
      status: props.state,
      id: props.id,
    },
  });
};
</script>

<style scoped lang="less">
.riskPoint {
  height: 100vh;
  background: #f7f8f7;

  .tabr-nav-title {
    display: flex;
    align-items: center;
    font-weight: 600;
    height: 44px;
    font-size: 18px;
    color: #29292c;
    text-align: center;
    font-style: normal;
    background: #fff;
    width: 100vw;
  }
  .content {
    margin: 10px;
    box-sizing: border-box;
    .search {
      height: 30px;
      background: #fff;
    }
    .cardList {
      height: calc(100vh - 104px);
      overflow-y: auto;
      margin-top: 10px;
      box-sizing: border-box;
      .alarm-item {
        background: #ffffff;
        border-radius: 8px 8px 8px 8px;
        margin-bottom: 12px;
        .alarm-header {
          height: 36px;
          width: 100%;
          background: linear-gradient(
            90deg,
            rgba(0, 127, 255, 0.08) 0%,
            rgba(0, 127, 255, 0) 100%
          );
          display: flex;
          padding-top: 8px;
          padding-left: 12px;
          padding-right: 12px;
          box-sizing: border-box;
          span {
            margin-top: 2px;
          }
          font-family: PingFang TC, PingFang TC;

          .t1 {
            font-weight: 600;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.9);
            margin-left: 4px;
          }

          .t2 {
            font-weight: 400;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.6);
            margin-left: 12px;
          }

          .t3 {
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #00b042;
            color: #00b042;
            text-align: center;
            padding: 0 4px;
            height: 18px;
            margin-left: auto;
          }
        }

        .alarm-content {
          padding: 8px 12px 12px 12px;
          font-family: PingFang TC, PingFang TC;
          .c1 {
            font-weight: 600;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.9);
          }

          .c2 {
            font-weight: 400;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.6);
            margin-top: 4px;
          }

          .line {
            border: 1px solid #e7e7e7;
            margin: 8px 0;
          }

          .status {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px 18px;
            font-family: PingFang TC, PingFang TC;
            font-weight: 400;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.4);

            div {
              span {
                color: rgba(245, 34, 45, 1);
              }
            }
            // div:last-child {
            //   grid-column: span 2; // 可调整为 span 2 或 span 3 来占用更多列
            //   width: 100%; // 根据需要可选
            //   text-align: right;
            // }
          }

          .confirm {
            width: 100%;
            margin-top: 8px;
          }
        }
      }
    }
  }
}
</style>
